<template>
  <div class="addConfigKeys" >
	<el-row  :gutter="24">
		<el-col  :sm="15" :md="12">
		<div class="page-header" v-text="'系统key配置'"></div>
		</el-col>
		<el-col :sm="9" :md="12">
		<el-button class="add-buttom" type="primary" @click="add">add</el-button>
		</el-col>
	</el-row>
	  	<el-table
			:data="form"
			:row-class-name="tableRowClassName"
			style="width: 100%">
				<el-table-column
				prop="name"
				label="name"
				width="180">
				</el-table-column>
				<el-table-column
				prop="description"
				label="description"
				width="180">
				</el-table-column>
				<el-table-column
				prop="service_slug"
				width="400"
				label="所属服务">
					<template scope="field">
						<el-tag v-for="(item, index) in JSON.parse(field.row.service_slug)" :key="index" v-if="getServeName(item)" v-text="getServeName(item)"></el-tag>
					</template>
				</el-table-column>
				<el-table-column
				prop="type"
				label="类型">
					<template scope="field">
						<span v-if="field.row.type == 0">租户</span>
						<span v-if="field.row.type == 1">子域名</span>
						<span v-if="field.row.type == 2">用户</span>
					</template>
				</el-table-column>
				<el-table-column
				prop="editable"
				label="是否可编辑">
					<template scope="field">
						{{field.row.editable == 0 ? '否' : '是'}}
					</template>
				</el-table-column>
				<el-table-column
				prop="required"
				label="是否必填"
				width="180">
					<template scope="field">
						{{field.row.required == 0 ? '否' : '是'}}
					</template>
				</el-table-column>
				<el-table-column
				prop="comment"
				label="备注">
				</el-table-column>
				<el-table-column
				prop="editable"
				label="操作">
					<template scope="field">
						<el-button @click="editConfig(field.row)">编辑</el-button>
						<el-button @click="deleteConfig(field.row)">删除</el-button>
					</template>
				</el-table-column>
		</el-table>
	<el-dialog title="编辑配置" :visible.sync="dialogForm">
		<el-form :model="field" label-width="100px" ref="upadteConfig">
			<el-form-item 
			label="name"
			prop="name"
			:rules="[{ required:true, message:'请输入配置名称', trriger:'blur' }]"
			>
				<el-input v-model="field.name"></el-input>
			</el-form-item>
			<el-form-item 
			label="description"
			prop="description"
			:rules="[{ required:true, message:'请输入配置描述', trriger:'blur' }]">
				<el-input v-model="field.description"></el-input>
			</el-form-item>
			<el-form-item 
			label="类型"
			prop="type"
			:rules="[{ required:true, message:'请选择配置类型', type:'number', trriger:'change' }]">
				<el-radio-group v-model="field.type">
					<el-radio :label="0">租户</el-radio>
					<el-radio :label="1">子域名</el-radio>
					<el-radio :label="2">用户</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item 
			label="所属服务"
			prop="service_slug"
			:rules="[{ required:true, message:'请选择所属服务', type:'array', trriger:'blur' }]"
			>
				<span class="loading" v-loading="true" v-if="!all_services.length && loadingStatus == 'loading'"></span>
				
				<el-checkbox-group v-model="field.service_slug">
					<el-checkbox :label="item.slug" v-for="(item, index) in all_services" :key="index">{{item.name}}</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item 
			label="是否可编辑"
			prop="editable">
				<el-radio-group v-model="field.editable">
				<el-radio :label="1">是</el-radio>
				<el-radio :label="0">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item 
			label="是否必填"
			prop="required">
				<el-radio-group v-model="field.required">
				<el-radio :label="1">是</el-radio>
				<el-radio :label="0">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="备注">
				<el-input type="textarea" v-model="field.comment"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">提交</el-button>
				<el-button @click="dialogForm=false">取消</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
  </div>
</template>
<script>
import request from "winged/utils/axios";
import permission from "winged/utils/wt-permission";
export default {
	name: "addConfigKeys",
	data() {
		return {
			form: [],
			field: {
				name: "",
				description: "",
				editable: 0,
				required: 1,
				comment: "",
				newField: true,
				service_slug: [],
				type: []
			},
			orginField: {},
			all_services: [],
			loadingStatus: "loading",
			dialogForm: false
		};
	},
	methods: {
		getServeName(code) {
			let res = false;
			this.all_services.forEach(item => {
				if (item.slug == code) {
					res = item.name;
				}
			});
			return res;
		},
		get_micro_services() {
			request(
				"uaa/config/get_micro_services",
				"post",
				{ data: "{}" },
				true,
				response => {
					if (typeof response == "string") {
						response = JSON.parse(response);
					}
					console.log("all_services", response);
					this.all_services = response.micro_services;
					this.loadingStatus = "SUCCESS";
					console.log("all_services", this.all_services);
				},
				err => {
					this.loadingStatus = "fail";
					console.log("err-get_micro_services", err);
					this.$message.error("获取服务失败！");
				},
				false
			);
		},
		getConfig() {
			request(
				"uaa/config/get_config_keys",
				"post",
				{ data: "{}" },
				true,
				response => {
					if (typeof response == "string") {
						response = JSON.parse(response);
					}
					this.form = response.config_keys;
				},
				err => {
					console.log("err", err);
					this.$message.error("获取配置项失败！");
				},
				false
			);
		},
		add() {
			this.dialogForm = true;
			this.field = {
				name: "",
				description: "",
				editable: 0,
				required: 1,
				comment: "",
				newField: true,
				service_slug: [],
				type: []
			};
			// for(let i in this.field){
			// 	if(Object.prototype.toString.call(this.field[i]) == '[object Array]'){
			// 		this.field[i] = JSON.stringify(this.field[i])
			// 	}
			// }
			// this.form.push(Object.assign({}, this.field))
			// this.field = Object.assign({},this.orginField)
		},
		editConfig(field) {
			this.dialogForm = true;
			this.field = field;
		},
		deleteConfig(field) {
			if (field.newField) {
				//删除本地新增的配置项（尚未提交到数据库）
				this.form.forEach((item, index) => {
					if (item.name == field.name) {
						this.form.splice(index, 1);
					}
				});
				return;
			}
			this.$confirm("此操作将从数据库中删除该key, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				this.form.forEach((item, index) => {
					if (item.name == field.name) {
						this.form.splice(index, 1);
					}
				});
				//删除数据库指定配置项
				request(
					"uaa/config/delete_config_keys",
					"post",
					{
						data: JSON.stringify({
							config_keys: [{ name: field.name }]
						})
					},
					true,
					response => {
						if (typeof response == "string") {
							response = JSON.parse(response);
						}
						if (response.status == "SUCCESS") {
							this.$message.success("删除成功！");
						}
					},
					err => {
						console.log("err", err);
						this.$message.error("删除失败！");
					},
					true
				);
			});
		},
		onSubmit() {
			this.$refs.upadteConfig.validate(valid => {
				if (valid) {
					var arr = [];
					arr[0] = this.field;
					request(
						"uaa/config/update_config_keys",
						"post",
						{ data: JSON.stringify({ config_keys: arr }) },
						true,
						response => {
							if (typeof response == "string") {
								response = JSON.parse(response);
							}
							console.log("response", response);
							if (response.status == "SUCCESS") {
								this.$message.success("提交成功！");
								this.getConfig();
							}
						},
						err => {
							console.log("err", err);
							this.$message.error("提交失败！");
						},
						true
					);
					this.dialogForm = false;
				}
			});
		},
		tableRowClassName(row, index) {
			// console.log('row',row)
			if (!row.newField) {
				return "info-row";
			} else {
				return "";
			}
		},
		handleCheckAllChange(event) {
			this.checkedCities = event.target.checked ? cityOptions : [];
			this.isIndeterminate = false;
		}
	},
	created() {
		this.orginField = Object.assign({}, this.field);
		this.getConfig();
		this.get_micro_services();
	}
};
</script>
<style>
.el-table {
	margin-bottom: 40px;
}
.el-form {
	max-width: 1200px !important;
}
.el-table .info-row {
	background: #f1f1f1;
}
.el-tag {
	margin: 0 5px;
}
.loading {
	top: 26px;
}
.el-loading-spinner .circular {
	width: 24px;
	height: 24px;
}
.addConfigKeys .add-buttom {
	float: right;
	margin: 10px 0 20px 0;
}
</style>
